<template>
	<view class="content">
		<image class="bg" src="/static/me/bg.png" mode="widthFix"></image>
		<view class="user">
			<image class="head-img" :src="$imageUrl(userDetails.avatar)" mode=""></image>
			<view class="user-text">
				<view class="user-top">
					<view class="name">
						{{userDetails.nickName||''}}
					</view>
					<view class="type">
						{{userDetails.driverLevelName||'暂无等级'}}
					</view>
					<view class="upgrade" @click="$routeTo('/pages/me/upgradeVehicle/upgradeVehicle')">
						去升级>
					</view>
				</view>
				<view class="user-bottom">
					<image src="/static/me/lovePoint.png" mode=""></image>
					<view class="">
						爱心值：{{userDetails.lovePoint||0}}
					</view>
				</view>
			</view>
			<view  style="font-size: 24rpx;color: #666666;" @click="$routeTo('/pages/me/userInformation/userInformation')">
				编辑主页
			</view>
		</view>
		
		<view class="class-box">
			<view class="class-item" v-for="item in classList" @click="clickClass(item)">
				<image :src="item.img" mode=""></image>
				<view class="">
					{{item.num||0}}
				</view>
				<view style="margin-top: 10rpx;">
					{{item.text}}
				</view>
			</view>
		</view>
		
		<view class="card_">
			<view class="plan-box">
				<image src="/static/me/plan.png" mode=""></image>
				<view class="">
					未来行程计划
				</view>
				<view class="" @click="$routeTo('/pages/me/futurePlan/futurePlan')">
					去发布 >
				</view>
			</view>
			<view class="title_">
				<view class="">
					可提现（元）
				</view>
				<view class="" @click="$routeTo('/pages/me/commissionList/commissionList')">
					佣金流水 >
				</view>
			</view>
			<view class="money-box">
				<view class="">
					{{dataBoard.withdrawAble||0}}
				</view>
				<view class="btn" @click="$routeTo('/pages/me/withdrawDeposit/withdrawDeposit?=money'+dataBoard.withdrawAble)">
					提现
				</view>
			</view>
		</view>
		
		<view class="card" style="padding: 20rpx;">
			<view class="title" style="padding-bottom: 6rpx;">
				实时概况
			</view>
			<view class="data-box">
				<view class="data-item">
					<view class="box">
						<view class="">
							{{realTime.dayOrderNum||0}}
						</view>
						<view class="">
							今日订单
						</view>
					</view>
				</view>
				<view class="data-item">
					<view class="box">
						<view class="">
							{{realTime.dayIncome||0}}
						</view>
						<view class="">
							今日收入
						</view>
					</view>
				</view>
				<view class="data-item">
					<view class="box">
						<view class="">
							{{realTime.monthOrderNum||0}}
						</view>
						<view class="">
							本月订单
						</view>
					</view>
				</view>
				<view class="data-item" style="padding-bottom: 0;">
					<view class="box">
						<view class="">
							{{realTime.monthIncome||0}}
						</view>
						<view class="">
							本月收入
						</view>
					</view>
				</view>
				<view class="data-item" style="padding-bottom: 0;">
					<view class="box">
						<view class="">
							{{realTime.yearOrderNum||0}}
						</view>
						<view class="">
							本年订单
						</view>
					</view>
				</view>
				<view class="data-item" style="padding-bottom: 0;">
					<view class="box">
						<view class="">
							{{realTime.yearIncome||0}}
						</view>
						<view class="">
							本年收入
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="card" style="padding:12rpx 20rpx 40rpx 20rpx;">
			<view class="title">
				其他功能
			</view>
			<view class="rests-box">
				<view class="rests-item" v-for="item in restsList" @click="$routeTo(item.path)">
					<image :src="item.img" mode=""></image>
					<view class="">
						{{item.text}}
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="card" style="padding: 20rpx;">
			<view class="title" style="padding-bottom: 6rpx;">
				数据看板
			</view>
			<view class="data-box">
				<view class="data-item">
					<view class="box">
						<view class="">
							{{dataBoard.allOrderNum||0}}
						</view>
						<view class="">
							总订单数
						</view>
					</view>
				</view>
				<view class="data-item">
					<view class="box">
						<view class="">
							{{dataBoard.allOrderIncome||0}}
						</view>
						<view class="">
							总收入
						</view>
					</view>
				</view>
				<view class="data-item">
					<view class="box">
						<view class="">
							{{dataBoard.pendingIncome||0}}
						</view>
						<view class="">
							待收入
						</view>
					</view>
				</view>
				<view class="data-item">
					<view class="box">
						<view class="">
							{{dataBoard.withdrawAble||0}}
						</view>
						<view class="">
							可提现
						</view>
					</view>
				</view>
				<view class="data-item">
					<view class="box">
						<view class="">
							{{dataBoard.withdrawn||0}}
						</view>
						<view class="">
							已提现
						</view>
					</view>
				</view>
				<view class="data-item">
					<view class="box">
						<view class="">
							{{dataBoard.inManifestation||0}}
						</view>
						<view class="">
							提现中
						</view>
					</view>
				</view>
				<view class="data-item" style="padding-bottom: 0;">
					<view class="box">
						<view class="">
							{{dataBoard.donateVoluntarilyOrderNum||0}}
						</view>
						<view class="">
							乐捐订单数
						</view>
					</view>
				</view>
				<view class="data-item" style="padding-bottom: 0;">
					<view class="box">
						<view class="">
							{{dataBoard.donationAmount||0}}
						</view>
						<view class="">
							乐捐金额
						</view>
					</view>
				</view>
				<view class="data-item" style="padding-bottom: 0;"/>

			</view>
		</view>
	
		<view class="card">
			<u-cell-group :border="false">
				<u-cell title="我的培训" :border="false" isLink icon="/static/me/cell1.png" url="/pages/me/train/train"></u-cell>
				<u-cell title="我有话说" :border="false" isLink  icon="/static/me/cell2.png" url='/pages/me/opinion/opinion'></u-cell>
				<u-cell title="邀请司机" :border="false" isLink icon="/static/me/cell3.png">
					<view slot="title" class="u-slot-title">
						<button open-type="share" class="service" type="default" send-message-path="/pages/me/me"
							show-message-card style="color:#333;font-size: 15px;letter-spacing:3rpx;">
							邀请司机
						</button>
					</view>
				</u-cell>
				<u-cell title="联系客服" :border="false" isLink @click="makePhoneCall"  icon="/static/me/cell4.png">
				</u-cell>
				<u-cell title="设置" :border="false" isLink  icon="/static/me/cell5.png" url="/pages/me/settingUp/settingUp"></u-cell>
			</u-cell-group>
		</view>
		<view class="serve-text" @click="$makePhoneCall()">
			客服电话:{{phoneNumber}}
		</view>
		<Loading/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				restsList:[{
					text:'车辆信息',
					img:'/static/me/rests1.png',
					path:'/pages/me/vehicleMessage/vehicleMessage'
				},{
					text:'历史订单',
					img:'/static/me/rests2.png',
					path:'/pages/me/orderHistory/orderHistory'
				},{
					text:'我的评价',
					img:'/static/me/rests3.png',
					path:'/pages/me/myEvaluate/myEvaluate'
				},{
					text:'我的保证金',
					img:'/static/me/rests4.png',
					path:'/pages/me/upgradeVehicle/upgradeVehicle'
				}],
				classList:[],
				realTime:{},
				dataBoard:{},
				userDetails:{},
				phoneNumber:uni.getStorageSync('phoneNumber')
			}
		},
		onShareAppMessage(res) {
			return {
				imageUrl:'https://chongwu.goldsu.cn/file/pet/share-img2.png',
			}
		},
		onShow() {
			this.$myRequest('/api/driver/mine/v1/realTime/view').then(res => {
				this.realTime=res.data
			})
			this.$myRequest('/api/driver/mine/v1/data/board').then(res => {
				this.dataBoard=res.data
			})
			this.$myRequest('/api/driver/mine/v1/order/statusNum').then(res => {
				this.classList=[{
					text:'抢单池',
					img:'/static/me/class1.png',
					num:res.data.orderGrabbingPoolNum,
					path:'/pages/index/index'
				},{
					text:'待取宠',
					img:'/static/me/class2.png',
					num:res.data.toBeFavored,
					path:'/pages/order/order',
					status:5
				},{
					text:'运输中',
					img:'/static/me/class3.png',
					num:res.data.inTransitNum,
					path:'/pages/order/order',
					status:6
				},{
					text:'已取消',
					img:'/static/me/class4.png',
					num:res.data.canceledNum,
					path:'/pages/me/orderHistory/orderHistory?current=1',
					status:99
				}]
			})
			this.$myRequest('/api/driver/mine/v1/driver/details').then(res => {
				this.userDetails=res.data
			})
		},
		methods: {
			clickClass(item){
				getApp().globalData.statusType=item.status;
				this.$routeTo(item.path,item.status!==99)
			},
			makePhoneCall(){
				this.$makePhoneCall()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 180rpx;
		
		.serve-text {
			color: $theme-color;
			text-align: center;
			font-size: 26rpx;
			margin-top: 12rpx;
			padding-bottom: 100rpx;
		}
		
		.bg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			z-index: -1;
		}
		.user{
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			.head-img{
				width: 138rpx;
				height: 138rpx;
				border-radius: 50%;
				border: 2px solid #ffffff;
				margin-right: 18rpx;
			}
			.user-text{
				height: 110rpx;
				padding: 14rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				.user-top{
					display: flex;
					align-items: center;
					.name{
						font-size: 32rpx;
						color: #333333;
						font-weight: bold;
					}
					.type{
						min-width: 96rpx;
						padding: 0 5rpx;
						height: 40rpx;
						background: #ACBEEA;
						border-radius: 20rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #FFFFFF;
						text-align: center;
						margin: 0 10rpx;
					}
					.upgrade{
						font-size: 26rpx;
						color: #666666;
					}
				}
				.user-bottom{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #333333;
					font-weight: bold;
					image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	
	    .class-box{
			display: flex;
			justify-content: space-between;
			padding: 60rpx 20rpx 20rpx 20rpx;
			.class-item{
				width: 164rpx;
				padding: 58rpx 0 14rpx 0;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				border-radius: 14rpx;
				text-align: center;
				position: relative;
				image{
					position: absolute;
					width: 74rpx;
					height: 74rpx;
					left: 50%;
					transform: translateX(-50%);
					top: -34rpx;
				}
			}
			>view:nth-child(1){
				background: linear-gradient(180deg, rgba(254, 207, 187, .66) 0%, rgba(255, 245, 241, .66) 100%);
			}
			>view:nth-child(2){
				background: linear-gradient(180deg, rgba(182, 227, 234, .66) 0%, rgba(232, 252, 255, .66) 100%);
			}
			>view:nth-child(3){
				background: linear-gradient(180deg, rgba(200, 213, 247, .66) 0%, rgba(217, 227, 251, .66) 53%, rgba(233, 239, 255, .66) 100%);
			}
			>view:nth-child(4){
				background: linear-gradient(180deg, rgba(252, 237, 190, .66) 0%, rgba(255, 249, 229, .66) 100%);
			}
		}
	    
		.card_{
			background: linear-gradient(180deg, #FFF7E2 0%, #FFF9F6 100%);
			box-shadow: 0rpx 6rpx 12rpx rgba(251,241,215,0.16);
			border-radius: 14rpx;
			padding: 20rpx;
			margin: 0 20rpx;
			box-shadow: 0rpx 6rpx 12rpx rgba(251,241,215,0.16);
			.plan-box{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				padding-bottom: 16rpx;
				border-bottom: 2rpx solid #FFFFFF;
				image{
					width: 64rpx;
					height: 64rpx;
					margin-right: 8rpx;
				}
				view:nth-child(2){
					color: #1C1C1C;
					font-weight: bold;
					flex: 1;
				}
				view:nth-child(3){
					color: #666666;
				}
			}
			.title_{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #1C1C1C;
				font-weight: bold;
				justify-content: space-between;
				padding: 46rpx 0 30rpx 0;
				view:nth-child(2){
					color: #666666;
					font-weight: 100;
				}
			}
			.money-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #1C1C1C;
				font-size: 48rpx;
				font-weight: bold;
				.btn{
					width: 172rpx;
					height: 60rpx;
					background: #FFD360;
					border-radius: 30rpx;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 60rpx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}
	 
	    .card{
			background-color: #ffffff;
			border-radius: 14rpx;
			box-shadow: 0rpx 0rpx 20rpx rgba(184,184,184,0.23);
			margin: 20rpx 20rpx 0 20rpx;
			.title{
				color: #1C1C1C;
				font-size: 32rpx;
				font-weight: bold;
			}
			.data-box{
				padding: 20rpx 30rpx;
				display: flex;
				flex-wrap: wrap;
				
				.data-item{
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					padding: 34rpx 0;
					width: 33%;
                    text-align: center;
					display: flex;
					justify-content: center;
					
					border-top: 2rpx solid #ECECEC;
					border-left: 2rpx solid #ECECEC;
					.box view:nth-child(1){
						font-size: 32rpx;
					}
				}
				>view:nth-child(3n){
					justify-content: flex-end;
				}
				>view:nth-child(3n+1){
					justify-content: flex-start;
					border-left: none;
				}
				>view:nth-child(1),>view:nth-child(2),>view:nth-child(3){
					padding-top: 0;
					border-top: none;
				}

			}
		
		    .rests-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				.rests-item{
					image{
						width: 130rpx;
						height: 130rpx;
					}
				}
			}
		}
	}

	.service {
		background-color: #FFFFFF !important;
		border-radius: 0 !important;
		padding: 0 !important;
		font-size: 15px !important;
		line-height: 1.5em !important;
		text-align: left !important;
	}
	.service::after {
		border: none;
	}
</style>
